<template>
<div>
  <el-card>
    <!-- 添加角色 -->
    <el-row>
      <el-col style="text-align: right;">
        <el-button type="primary" size="mini" @click="addStackerBtnClick">添加堆垛机</el-button>
      </el-col>
    </el-row>
    <!--角色列表-->
    <el-table :data="stackerList" border>
      <el-table-column label="No" type="index"></el-table-column>
      <el-table-column label="堆垛机名称" prop="stackerName" min-width="200"></el-table-column>
      <el-table-column label="堆垛机IP" prop="stackerIP" min-width="200"></el-table-column>
      <el-table-column label="堆垛机端口" prop="stackerPort" min-width="200"></el-table-column>
      <el-table-column label="在线状态" width="200">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.roleStatus" type="success">在线</el-tag>
          <el-tag v-show="!scope.row.roleStatus" type="danger">离线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="取货地址" prop="stackerPickAddress" min-width="200"></el-table-column>
      <el-table-column label="取货列" prop="stackerPickWidth" min-width="200"></el-table-column>
      <el-table-column label="取货层" prop="stackerPickHeight" min-width="200"></el-table-column>
      <el-table-column label="操作" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteClick(scope.row)">删除</el-button>
          <el-button type="warning" size="mini" @click="paramClick(scope.row)">参数</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-dialogDrag title="添加堆垛机" :visible.sync="addStackerDialog" width="40%" center @closed="addStackerDialogClosed" @opened="addStackerDialogOpen"
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="addStackerFormRef" :model="addStackerForm" :rules="addStackerFormRules" label-position="right"
          label-width="110px">
          <el-form-item label="堆垛机名称" prop="stackerName" v-on:keyup.enter.native="addStacker">
            <el-input ref="powerGroupInputRef" v-model="addStackerForm.stackerName"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机IP地址" prop="stackerIP" v-on:keyup.enter.native="addStacker">
            <el-input v-model="addStackerForm.stackerIP"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机端口号" prop="stackerPort" v-on:keyup.enter.native="addStacker">
            <el-input v-model="addStackerForm.stackerPort"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货位" prop="stackerPickAddress" v-on:keyup.enter.native="addStacker">
            <el-input v-model="addStackerForm.stackerPickAddress"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货列" prop="stackerPickWidth" v-on:keyup.enter.native="addStacker">
            <el-input v-model="addStackerForm.stackerPickWidth"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货层" prop="stackerPickHeight" v-on:keyup.enter.native="addStacker">
            <el-input v-model="addStackerForm.stackerPickHeight"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addStacker">提交</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑堆垛机" :visible.sync="editStackerDialog" width="40%" center
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="editStackerFormRef" :model="editStackerForm" :rules="addStackerFormRules" label-position="right"
          label-width="110px">
          <el-form-item label="堆垛机名称" prop="stackerName" v-on:keyup.enter.native="editStacker">
            <el-input ref="powerGroupInputRef" v-model="editStackerForm.stackerName"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机IP地址" prop="stackerIP" v-on:keyup.enter.native="editStacker">
            <el-input v-model="editStackerForm.stackerIP"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机端口号" prop="stackerPort" v-on:keyup.enter.native="editStacker">
            <el-input v-model="editStackerForm.stackerPort"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货位" prop="stackerPickAddress" v-on:keyup.enter.native="editStacker">
            <el-input v-model="editStackerForm.stackerPickAddress"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货列" prop="stackerPickWidth" v-on:keyup.enter.native="editStacker">
            <el-input v-model="editStackerForm.stackerPickWidth"></el-input>
          </el-form-item>
          <el-form-item label="堆垛机取货层" prop="stackerPickHeight" v-on:keyup.enter.native="editStacker">
            <el-input v-model="editStackerForm.stackerPickHeight"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="editStacker">提交</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="堆垛机参数" :visible.sync="stackerParamDialog" width="40%" center
      :close-on-click-modal="false">
    </el-dialog>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'Stacker',
  data () {
    return {
      addStackerDialog: false,
      editStackerDialog: false,
      stackerParamDialog: false,
      stackerList: [],
      addStackerForm: {
        stackerName: '',
        stackerIP: '',
        stackerPort: '',
        stackerPickAddress: '',
        stackerPickWidth: '',
        stackerPickHeight: ''
      },
      editStackerForm: {
        stackerId: '',
        stackerName: '',
        stackerIP: '',
        stackerPort: '',
        stackerPickAddress: '',
        stackerPickWidth: '',
        stackerPickHeight: ''
      },
      addStackerFormRules: {
        stackerName: [{
          required: true,
          message: '请输入堆垛机名称',
          trigger: 'blur'
        }],
        stackerIP: [{
          required: true,
          message: '请输入堆垛机IP',
          trigger: 'blur'
        }],
        stackerPort: [{
          required: true,
          message: '请输入堆垛机端口',
          trigger: 'blur'
        }],
        stackerPickAddress: [{
          required: true,
          message: '请输入堆垛机取货位',
          trigger: 'blur'
        }],
        stackerPickWidth: [{
          required: true,
          message: '请输入堆垛机取货列',
          trigger: 'blur'
        }],
        stackerPickHeight: [{
          required: true,
          message: '请输入堆垛机取货层',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getStackerList () {
      const res = await this.$apiUtil.get('stacker/list', {})
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.stackerList = res.data
    },
    addStackerBtnClick () {
      this.addStackerDialog = true
    },
    addStackerDialogClosed () {

    },
    addStackerDialogOpen () {

    },
    async addStacker () {
      const res = await this.$apiUtil.postByJson('stacker/create', this.addStackerForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('添加堆垛机成功')
      this.getStackerList()
      this.addStackerDialog = false
    },
    async editStacker () {
      const res = await this.$apiUtil.postByJson('stacker/edit', this.editStackerForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑堆垛机成功')
      this.getStackerList()
      this.editStackerDialog = false
    },
    editClick (row) {
      this.editStackerForm.stackerId = row.stackerId
      this.editStackerForm.stackerName = row.stackerName
      this.editStackerForm.stackerIP = row.stackerIP
      this.editStackerForm.stackerPort = row.stackerPort
      this.editStackerForm.stackerPickAddress = row.stackerPickAddress
      this.editStackerForm.stackerPickWidth = row.stackerPickWidth
      this.editStackerForm.stackerPickHeight = row.stackerPickHeight
      this.editStackerDialog = true
    },
    deleteClick (row) {
      this.$alert('确定删除堆垛机:' + row.stackerName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('stacker/delete', { stackerId: row.stackerId })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除堆垛机成功')
            this.getStackerList()
          }
        }
      })
    },
    async paramClick (row) {
      const res = await this.$apiUtil.postByForm('stacker/openReadParam', { stackerId: row.stackerId })
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.stackerParamDialog = true
    }
  },
  created () {
    this.getStackerList()
  }
}
</script>

<style lang="less" scoped>
</style>
